<template>
  <div>
    <el-tabs :tab-position="tabPosition" style="height: 200px">
      <el-tab-pane label="后台账户管理">
        <el-input
          v-model="info.adminuserid"
          v-if="false"
          placeholder="请输入内容"
        ></el-input>
        <el-input
          v-model="info.adminusername"
          placeholder="请输入内容"
        ></el-input>
        <el-input
          v-model="info.adminuserpassword"
          placeholder="请输入内容"
        ></el-input>
        <el-button type="primary" @click="updataOneAdminuser()"
          >提交修改</el-button
        >
        <div></div>
      </el-tab-pane>
      <el-tab-pane label="文章列表" @click="AllArticle()"></el-tab-pane>
      <el-tab-pane label="客户管理">
        <el-table :data="users" style="width: 100%">
          <el-table-column prop="userid" label="id" width="180">
          </el-table-column>
          <el-table-column prop="username" label="账号" width="180">
          </el-table-column>
          <el-table-column prop="userpassword" label="密码" width="180">
          </el-table-column>
          <el-table-column prop="usersurnamename" label="真实姓名" width="180">
          </el-table-column>
          <el-table-column prop="userphone" label="手机号" width="180">
          </el-table-column>
          <el-table-column prop="userpower" label="操作权限" width="180">
          </el-table-column> </el-table
      ></el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "UpdateAdminUser",
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.postOneAdminUser();
      vm.AllArticle();
      vm.AllUsers();
    });
  },
  data() {
    return {
      tabPosition: "left",
      info: {
        adminUserId: "",
        adminUserName: "",
        adminUserPassword: "",
      },
      article: {
        articleid: "",
        articletitle: "",
        articlecontent: "",
        articleauthor: "",
        articledate: "",
        articleclassification: "",
        articlebrowse: "",
        articlefabulous: "",
        articlecomment: "",
        articlecollection: "",
      },
      users: {
        userid: "",
        username: "",
        userpassword: "",
        usersurnamename: "",
        userphone: "",
        userpower: "",
      },
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    postOneAdminUser() {
      let token = window.sessionStorage.getItem("token");
      this.axios({
        method: "POST",
        headers: { Authorization: token },
        url: this.$constant.url + "/adminuser/queryOneAdminUser",
      }).then(({ data }) => {
        this.info = data.data;
      });
    },
    updataOneAdminuser() {
      let that = this;
      let token = window.sessionStorage.getItem("token");
      this.axios({
        method: "POST",
        headers: { Authorization: token },
        url: this.$constant.url + "/adminuser/updataOneAdminUser",
        data: that.info,
      }).then(({ data }) => {
        this.info = data.data;
      });
    },
    AllArticle() {
      let that = this;
      let token = window.sessionStorage.getItem("token");
      this.axios({
        method: "POST",
        headers: { Authorization: token },
        url: this.$constant.url + "/article/allArticle",
      }).then(({ data }) => {
        this.article = data.data;
      });
    },
    AllUsers() {
      let that = this;
      let token = window.sessionStorage.getItem("token");
      this.axios({
        method: "POST",
        headers: { Authorization: token },
        url: this.$constant.url + "/user/allUsers",
      }).then(({ data }) => {
        this.users = data.data;
      });
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>